<template id="center">
    <div>
        <div class="center_f">
        <div class="center_top">
            <div class="center_phone">
                <div class="center_left"  @click="person_center()">
                   
					<div class="img_r showimg">
						<img v-bind:src="userinfo.img != '' ? userinfo.img : img" alt="" v-if="is_login">
						<!-- <input type="file" class="files"  @change="getFile($event)">
                        <input type="hidden" v-model="source" > -->
					</div>
                </div>
                <div class="center_right">
                    <p v-if="is_login" class="name" >{{userinfo.user_name}}</p>
                    <p v-else class="login" @click="back_login()" >登录/注册</p>
					<span v-if="tips && tips.status == 1" style="display:none;">
					 <router-link  :to="tips.url" >{{tips.name}}</router-link>
					</span>
                </div>

            </div>
        </div>
        <ul class="center_ul">
                <li @click="get_balance()">
                    <span><time>{{userinfo.money}}</time>元</span><span>余额</span>
                    <span style="display:none">{{userinfo.money}}</span>
                </li>
                <li @click="get_yuan()">
                    <span><time>{{userinfo.coupon}}</time>张</span><span>红包劵</span>
                    <span style="display:none">{{userinfo.coupon}}</span>

                </li>
                <!--
                <li>
                    <span>可查看</span><span>发票</span><span>0</span>
                </li>
                -->
                <!--<li @click="get_integral()">
                    <span><time>{{userinfo.points}}</time>分</span><span>积分兑换</span>
                    <span style="display:none">{{userinfo.points}}</span>
                </li>-->
            <li @click="getIdea()">
                <!--<span><time>{{userinfo.feedback}}</time>条</span><span>意见箱</span>-->
                <span><time>0</time>条</span><span>意见箱</span>
                <span style="display:none">{{userinfo.feedback}}</span>
            </li>
            </ul>
        <!--新增会员部分-->
         <div class="member_1" @click="get_Mem()">
              <p>会员权益</p>
             <p>成为{{user_member.cname}},预计一年将为您<time>节省1122.8元</time></p>
             <span>去续费</span>
             <span></span>
             <img src="../image/dy.jpg" alt="">
         </div>
         <div class="center_Member_list">
                <div class="swiper-container" id="center_Member_swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click="get_now()">
                            <img src="../image/Backnow.png" alt="">
                            <span>购物返现<time>{{user_member.scale}}</time>%</span>
                        </div>
                        <div class="swiper-slide" @click="get_friend()">
                            <img src="../image/my_friend.png" alt="">
                            <span>邀好友返现<time>{{user_member.scale}}</time>%</span>
                        </div>
                        <div class="swiper-slide" @click="get_member_good()">
                            <img src="../image/member_goods.png" alt="">
                            <span>会员商品</span>
                        </div>
                        <div class="swiper-slide" @click="get_try()">
                            <img src="../image/t_eat.png" alt="">
                            <span>新品试吃</span>
                        </div>
                        <div class="swiper-slide" @click="get_zhuan()">
                            <img src="../image/kefu.png" alt="">
                            <span>专业客服</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="member_2">
              <div class="member_2_1">
                  <a :href="images.link">
                    <img v-bind:src="images.url ? images.url : banner"  alt="" >
                  </a>
              </div>
          </div>
         <p class="center_order">
             <router-link to="/myorder">
             <!--<img src="../image/di.jpg" alt="">-->
             <img src="../image/dy.jpg" alt="">
             <span>我的订单</span>
             <span>全部订单</span>
             <span>订单详情都在这呢</span>
             </router-link>
         </p>
            <!--订单详情-->
           <!-- <ul>
                <li><img src="../image/Pendingpayment.png" alt=""><span>代付款</span></li>
                <li><img src="../image/p_fgoods.png" alt=""><span>待发货</span></li>
                <li><img src="../image/p_goods.png" alt=""><span>待收货</span></li>
                <li><img src="../image/p_pjia.png" alt=""><span>待评价</span></li>
                <li><img src="../image/refiund_g.png" alt=""><span></span></li>
            </ul>-->
        <div class="center_lis">
            <dl @click="getPayment()">
                <dt><img src="../image/Pendingpayment.png" alt=""></dt>
                <dd>待付款</dd>
				<span  v-if="userinfo.unpaid > 0">{{userinfo.unpaid}}</span>
            </dl>
            <dl @click="getGoods()">
                <dt><img src="../image/p_fgoods.png" alt=""></dt>
                <dd>待发货</dd>
				<span  v-if="userinfo.pending > 0">{{userinfo.pending}}</span>
            </dl>
            <dl @click="getReceipt()">
                <dt><img src="../image/p_goods.png" alt=""></dt>
                <dd>待收货</dd>
				<span  v-if="userinfo.received > 0">{{userinfo.received}}</span>
            </dl>
            <dl @click="getEvaluate()">
                <dt><img src="../image/p_pjia.png" alt=""></dt>
                <dd>待评价</dd>
				<span  v-if="userinfo.comment > 0">{{userinfo.comment}}</span>
            </dl>
            <dl  @click="Service()">
                <dt><img src="../image/refiund_g.png" alt=""></dt>
                <dd>退款/售后</dd>
                <span  v-if="userinfo.comment > 0"></span>
            </dl>
        </div>
        <p class="center_border"></p>
        <p class="center_first" @click="share()">
            <!--<img src="../image/li.jpg" alt="">-->
            <img src="../image/dy.jpg" alt="">
            <span>邀请礼</span>
            <span>领取好礼</span>
            <span></span>
        </p>
        <p class="center_second" @click="get_tryn()">
           <!-- <img src="../image/fu.jpg" alt="">-->
            <img src="../image/dy.jpg" alt="">
            <span>新品试吃</span>
            <span>领取赠品</span>
            <span></span>
        </p>
            <p class="center_four" @click="get_code()">
                <!-- <img src="../image/fu.jpg" alt="">-->
                <img src="../image/dy.jpg" alt="">
                <span>兑换优惠码</span>
                <span>去兑换</span>
                <span></span>
            </p>
        <p class="center_third"@click="person_center()"  style="display:none">
            <!--<img src="../image/deng.jpg" alt="">-->
            <img src="../image/dy.jpg" alt="">
            <span>我的地址</span>
        </p>
        <p class="center_third" @click="help()">
            <!--<img src="../image/girl.jpg" alt="">-->
            <img src="../image/dy.jpg" alt="">
            <span>帮助中心</span>
        </p>
            <!--<p class="center_third">
                <img src="../image/girl.jpg" alt="">
                <img src="../image/dy.jpg" alt="">
                <span>在线客服</span>
            </p>-->
            <p class="center_third">
                <!--<img src="../image/girl.jpg" alt="">-->
                <a href="http://www.xiaomashengxian.com/huodong?id=18"><img src="../image/dy.jpg" alt="">
                <span>关于我们</span></a>
            </p>
        <p class="center_footer"></p>
        </div>
        <v-footer></v-footer>
        <div class='wan' @click="idea_hide()">感谢您的宝贵意见~ </div>
    </div>
</template>
<script>
    import footer from './footer.vue';

    export default{
       name: 'center',
       components:{
           'v-footer':footer
       },
	   data(){
            return{
                userinfo:'',
                is_login:false,
                tips: {},
    		    img:require("../image/ma.jpg"),
				source:'center',
                user_member:[],
                banner:require('../image/center_bac.png'),
                images:'',
            }
       },
	   filters: {
			is_img: function (value) {
				return value ? value : this.img;
			}
       },
	   mounted:function(){
           let Member_swiper = new Swiper('#center_Member_swiper', {
               observer:true,//修改swiper自己或子元素时，自动初始化swiper
               observeParents:true, //修改swiper的父元素时，自动初始化swiper
               slidesPerView:4.5,
               direction:'horizontal',

           });
            //感谢提醒
			var pack = this.$route.query.pack;
		    if(pack == 'idea'){
				var idea = this.GLOBAL.getCookie('idea');
				if(!idea){
					$('.wan').show();
					$('.wan').fadeOut(3000);
					this.GLOBAL.setCookie('idea',1,3);
				}
			}				
			 
            //会员基础信息
            this.GLOBAL.user_member(this);

            //初始化
            this.get_info();

             //广告图
            this.get_banner();

        },
        methods:{
            /*新品试吃*/
            get_try:function(){
                this.$router.push('/try_eat')
            },
            /*购物返现*/
            get_now:function(){
                this.$router.push('/Back_now')
            },
            /*会员商品*/
            get_member_good:function(){
                this.$router.push('/member_good')
            },
            /*专享客服*/
            get_zhuan:function(){
                this.$router.push('/Cus_service')
            },
	       /*邀请好友*/
            get_friend:function(){
                this.$router.push('/Invite_friends')
            },
	       /*红包劵*/
            get_yuan:function(){
                this.$router.push('/Red_coupon')
            },
            /*领取新品试吃*/
            get_tryn:function(){
                this.$router.push('/new_try')
            },
	       /*积分兑换*/
            get_integral:function(){
                 this.$router.push('/my_integral')
            },
	       /*我的余额*/
            get_balance:function(){
                this.$router.push('/my_balance')
            },
	       /*会员权益*/
            get_Mem:function(){
              this.$router.push('/member_right')
            },
	       /*个人中心资料修改*/
            person_center:function(){
                this.$router.push('/personCenter')
            },
            /*优惠嘛*/
            get_code:function(){
                this.$router.push('/QR_code');
            },
            /*售后服务*/
            Service:function(){
                this.$router.push('/customerService')
            },
            getIdea:function(){
                this.$router.push('/idea')
            },
            help:function(){
                this.$router.push('/help')
            },
			share:function(){
				this.$router.push('/shareLi')
			},
			idea_hide:function(){
				$('.wan').fadeOut("slow");
			},
			getPayment:function(){
				this.$router.push('/myorder/payment')
			},
			getGoods:function(){
				this.$router.push('/myorder/goods')
			},
			getReceipt:function(){
				this.$router.push('/myorder/receipt')
			},
			getEvaluate:function(){
				this.$router.push('/myorder/evaluate')
			},
            /*老版本的优惠券*/
           /* getCoupon:function(){
			    this.$router.push('/Coupon')
            },*/
            get_info(){

                //初始化个人信息
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=main';
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.userinfo = temp.data;
                        this.tips     =   temp.data.tips
                        this.is_login =  true;
                    }else{
                        console.log(temp.msg);        
                    }                 
                 })

            },
            back_login(){
               this.GLOBAL.back_login(this);
            },
            get_banner:function(){
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=userbanner';
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.images = temp.data;
                    }else{
                        // this.GLOBAL.center_error(this,temp);
                    }
                })

            },
            golink:function(){
                if(this.images.link){
                    this.$router.push(this.images.link);
                }
            },
			
        }
    };

</script>
<style>
    /*member_2*/
    .center_Member_list{
        height:1.4rem;
        width:100%;
        padding-top:0.34rem;
       /* overflow: hidden;*/
    }
    #center_Member_swiper .swiper-wrapper .swiper-slide{
        width: 1.4rem;
        height:1.5rem;
    }
    #center_Member_swiper .swiper-wrapper{
       /* width: 100%;*/
    }
    #center_Member_swiper ,.swiper-container {
        /*width: 1.4rem;
        overflow: visible;
        margin-left:0rem;*/
    }
    #center_Member_swiper .swiper-wrapper .swiper-slide img{
        display:block;
        height:0.6rem;
        width:0.6rem;
        margin-left:0.36rem;
        margin-bottom:0.21em;

    }
    #center_Member_swiper .swiper-wrapper .swiper-slide span{
        display:block;
        width: 1.4rem;
        height:0.2rem;
        line-height:0.2rem;
        font-size:0.2rem;
        color:#858484;
        text-align:center;
    }
    #center_Member_swiper .swiper-wrapper .swiper-slide span time{
        color:#ca1b80;
    }
    /*banner图*/
    .member_2{
        width:100%;
        height:1.32rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .member_2_1{
        width:6.4rem;
        height:1.2rem;
        margin:0 auto;
        border-radius:0.05rem;
    }
    .member_2_1 img{
        width: 6.4rem;
        display:block;
        height: 1.2rem;
        border-radius:0.05rem;
    }

    /*新增会员部分*/
    .member_1 span:nth-of-type(1){
        position:absolute;
        width:0.78rem;
        height:0.28rem;
        line-height:0.28rem;
        text-align:center;
        font-size:0.24rem;
        color:#a7a7a7;
        top:0.27rem;
        right:0.52rem;
    }
    .member_1 span:nth-of-type(2){
        display:block;
        height:0.1rem;
        width:0.1rem;
        border-radius:50%;
        background:#fc1dac;
        position:absolute;
        top:0.35rem;
        right:0.42rem;
    }
    .member_1 img{
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.2rem;
        top:0.24rem;
        display:block;
    }
    .member_1{
        height:0.8rem;
        width:100%;
        position:relative;
    }
    .member_1 p:nth-of-type(1){
        height:0.42rem;
        line-height:0.42rem;
        font-size:0.26rem;
        text-indent:0.18rem;
        color:#000000;
    }
    .member_1 p:nth-of-type(2){
        height:0.38rem;
        line-height:0.38rem;
        font-size:0.2rem;
        color:#c2c2c2;
        text-indent:0.18rem;
    }
    .member_1 p:nth-of-type(2) time{
        color:#fd71c3;
    }
    /*-----------*/
    .center_f{
        overflow-x: hidden;
    }

    .login{
        height: 0.59rem;
        width: 1.78rem;
        line-height: 0.59rem;
        text-align: center;
        color: #ffffff;
        font-size: 0.26rem;
        margin-top: 0.2rem;
        margin-left:0.9rem;
        border:0.01rem solid #ffffff;
        border-radius:0.05rem;
    }
	.wan{
		display:none;
		height: 1rem;
		width: 3.2rem;
		background: #adabab;
		position: fixed;
		top: 30%;
		left: 25%;
		line-height: 1rem;
		text-align: center;
		color: #fff;
		font-size: 0.24rem;
		border-radius:0.05rem;
	}
    .center_order a{
        display:block;
        text-decoration:none;
    }
    .center_footer{
        height:1rem;
        width:100%;
        background:#f5f4f2;
        box-shadow: 0 0.03rem 0.04rem #bdbdbb;
    }
    .center_first,.center_second,.center_third,.center_four{
        width:100%;
        height:0.8rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .center_first img:nth-of-type(1){
         width:0.16rem;
         height:0.28rem;
         position:absolute;
         right:0.26rem;
         top:0.24rem;
     }
    .center_third img:nth-of-type(1){
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.26rem;
        top:0.24rem;
    }
    .center_second img:nth-of-type(1){
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.26rem;
        top:0.24rem;
    }
    .center_second span:nth-of-type(2){
        width:1.79rem;
        height:0.8rem;
        line-height:0.8rem;
        text-indent: 0.2rem;
        color:#fc1dac;
        font-size:0.24rem;
        float:right;
    }
    .center_second span:nth-of-type(3){
        display:block;
        height:0.1rem;
        width:0.1rem;
        border-radius:50%;
        position:absolute;
        top:0.35rem;
        right:0.45rem;
        background:#fc1dac;
    }
    .center_second span:nth-of-type(1){
        width:2.24rem;
        height:0.8rem;
        line-height:0.8rem;
        /* text-align:center;*/
        text-indent: 0.2rem;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_four img:nth-of-type(1){
        width:0.16rem;
        height:0.28rem;
        position:absolute;
        right:0.26rem;
        top:0.24rem;
    }
    .center_four span:nth-of-type(2){
        width:1.79rem;
        height:0.8rem;
        line-height:0.8rem;
        text-indent: 0.4rem;
        color:#fc1dac;
        font-size:0.24rem;
        float:right;
    }
    .center_four span:nth-of-type(3){
        display:block;
        height:0.1rem;
        width:0.1rem;
        border-radius:50%;
        position:absolute;
        top:0.35rem;
        right:0.45rem;
        background:#fc1dac;
    }
    .center_four span:nth-of-type(1){
        width:2.24rem;
        height:0.8rem;
        line-height:0.8rem;
        /* text-align:center;*/
        text-indent: 0.2rem;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_third span:nth-of-type(1){
        width:2.24rem;
        height:0.8rem;
        line-height:0.8rem;
       /* text-align:center;*/
        text-indent: 0.2rem;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_first span:nth-of-type(1){
        width:2.06rem;
        height:0.8rem;
        line-height:0.8rem;
        text-indent: 0.2rem;
        color:#494848;
        font-size:0.24rem;
        float:left;
    }
    .center_first span:nth-of-type(2){
        width:1.79rem;
        height:0.8rem;
        line-height:0.8rem;
        text-indent: 0.2rem;
        color:#fc1dac;
        font-size:0.24rem;
        float:right;
    }
    .center_first span:nth-of-type(3){
        display:block;
        height:0.1rem;
        width:0.1rem;
        border-radius:50%;
        position:absolute;
        top:0.35rem;
        right:0.45rem;
        background:#fc1dac;
    }
    .center_border{
        height:0.09rem;
        width:100%;
        background:#f5f4f2;
    }
    .center_lis{
        width:100%;
        height:1.12rem;
        display:flex;
        padding-top:0.32rem;
    }
    .center_lis dl{
        flex:1;
        height:1.12rem;
        position:relative;
    }
	.center_lis dl:nth-of-type(1) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: -0.1rem;
    }
    .center_lis dl:nth-of-type(2) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.85rem;
        top: -0.1rem;
    }
    .center_lis dl:nth-of-type(3) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left:0.8rem;
        top: -0.1rem;
    }
	.center_lis dl:nth-of-type(4) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.8rem;
        top: -0.1rem;
    }
    .center_lis dl:nth-of-type(5) span{
        display: block;
        position: absolute;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: .16rem;
        line-height: 0.3rem;
        text-align: center;
        left: 0.76rem;
        top: -0.1rem;
    }
    .center_lis dl dd{
        height:0.33rem;
        line-height:0.33rem;
        text-align:center;
        color:#7a7979;
        font-size:0.19rem;
    }
    .center_lis dl dt{
        height:0.6rem;
        display:block;
      /*  position:relative;*/
    }
    .center_lis dl dt img{
        height:0.6rem;
        width:0.6rem;
        display:block;
        margin:0 auto;
       /* position:absolute;
        top:0.35rem;
        left:0.5rem;*/
    }
    /*分界线*/
    .center_order{
        height:0.83rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        padding-top:0.15rem;
    }
    .center_order span:nth-of-type(1){
        height:0.45rem;
        width:2.24rem;
        line-height:0.45rem;
       /* text-align:center;*/
        color:#000000;
        font-size:0.24rem;
        display:block;
        text-indent: 0.2rem;
    }
    .center_order img:nth-of-type(1){
        display:block;
        height:0.28rem;
        width:0.16rem;
        position:absolute;
        top: 0.32rem;
        right:0.2rem;
    }
    .center_order span:nth-of-type(2){
        width:1.79rem;
        height:0.97rem;
        line-height:0.97rem;
        text-align:center;
        color:#b5b5b5;
        font-size:0.22rem;
        position:absolute;
        right:0;
        top:0;
    }
    .center_order span:nth-of-type(3){
        width:2.24rem;
        height:0.36rem;
        line-height:0.36rem;
        color:#777777;
        font-size: 0.22rem;
        display:block;
        text-indent: 0.2rem;

    }
    .center_ul{
        height:0.84rem;
        width:100%;
        padding-top:0.2rem;
        display:flex;
        border-bottom:0.01rem solid #f0f0f0;
        margin-bottom:0.14rem;
    }
    .center_ul li{
        list-style:none;
        flex:1;
        height:0.84rem;
       /* float:left;*/
      /*  position:relative;*/
    }
    .center_ul li span:nth-of-type(1) time{
        color:#000000;
        font-size:0.24rem;
    }
     .center_ul li span:nth-of-type(1){
       /*  position:absolute;*/
         height:0.36rem;
        /* width:0.7rem;*/
         display:block;
         line-height:0.36rem;
         text-align:center;
         color:#3e3e3e;
         font-size:0.24rem;
        /* background:#fe7d02;*/
         /*top:0.45rem;
         left:0.77rem;*/
         /*border-radius:0.1rem;*/
     }
    .center_ul li span:nth-of-type(2){
       /* position:absolute;*/
   /*     width:1.6rem;*/
        display:block;
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#7c7c7c;
        font-size:0.2rem;
        font-weight:700;
        /*left:0.3rem;
        top:0.7rem;*/
    }
  /*  .center_ul li span:nth-of-type(3){
        height:0.2rem;
        width:1.6rem;
        line-height:0.2rem;
        text-align:center;
        color:#fe7d02;
        font-size:0.2rem;
        left:0.3rem;
        position:absolute;
        top:1.13rem;
    }*/
    .center_right span{
        position:absolute;
        width:1.64rem;
        height:0.44rem;
        line-height:0.44rem;
        text-align:center;
        color:#ffffff;
        background:#ff5ac4;
        border-radius:0.1rem;
        font-size:0.22rem;
        top:0.6rem;
        left:0.4rem;
    }
	.center_right span a{
		text-decoration:none;
        color:#ffffff;
     }
    .center_right .name{
        height:0.36rem;
        width:2.37rem;
        line-height:0.36rem;
        text-align:center;
        color:#2e2e2e;
        font-size:0.24rem;

    }
    .center_right{
        float:right;
        height:1.03rem;
        width:2.37rem;
        position:relative;
    }
    .center_left{
        height:1.03rem;
        width:1.03rem;
        float:left;
    }
    .center_left img{
        display:block;
        height:1.03rem;
        width:1.03rem;
        border-radius:50%;
    }
    .center_phone{
        height:1.04rem;
        width:3.41rem;
        position:absolute;
        top:0.54rem;
        left:0.32rem;
    }
    .center_top{
        width:100%;
        height:2.14rem;
        background:url(../image/center_bac.png) no-repeat;
        background-size:cover;
        position:relative;
    }

</style>
